<template>
<div class="find">
    <!-- 搜索 -->
    <van-search  placeholder="请输入搜索关键词" />
    <TabBar></TabBar>

    <!-- 侧边导航 -->
    <div class="find-left">
    <van-sidebar v-model="activeKey">
        <van-sidebar-item 
        v-for="item in cates"
        :key="item._id"
        v-text="item.cate_zh"
        @click="clickChange(item)"
         >
        </van-sidebar-item>
          
    </van-sidebar>
    </div>
    <!-- 商品分类 -->
    <div class="find-right">
    <van-grid :column-num="3">
        <van-grid-item v-for="item in list" :key="item._id" icon="photo-o" text="文字" >
            <template>
                <van-image  :src="item.img" />
            </template>
        </van-grid-item>
    </van-grid>
    </div>
</div>
</template>

<script>
import{
   Search,
   Sidebar,
   SidebarItem,
   Grid, 
   GridItem,
   Image
} from 'vant'
export default {
    name:'find',
    data() {
    return {
      activeKey: 0,
      cates:[],
      list:1,
      cate:''
    }
},
mounted(){
    this.$http.getAllCates({}).then(res=>{
        this.cates=res
        let params = {
               cate:''
           }
        this.$http.getFind(params).then((res)=>{
            this.list =res
        })
        console.log(res)
    })
},
    components:{
        TabBar:()=>import('../components/common/TabBar.vue'),
        [Search.name]:Search,
        [Sidebar.name]:Sidebar,
        [SidebarItem.name]:SidebarItem,
        [Grid.name]:Grid,
        [GridItem.name]:GridItem,
        [Image.name]:Image
       
    },
    methods:{
       clickChange(item){
           console.log(item);
           let params = {
               cate:item.cate
           }
           this.$http.getFind(params).then((res)=>{
               console.log(res)
               this.list =res
           })
       }
    }
}
</script>
<style lang="scss">
    .find{
        .find-left{
            position: absolute;
            overflow: auto;
            width: 2.5rem;
            left: 0;
            top: 1.6rem;
            bottom: 1.6rem;
        }
        .find-right{
            position: absolute;
            width: 7.5rem;
            right: 0;
            top: 1.6rem;
            bottom: 1.6rem;
            overflow: auto;
        }
    }
</style>